<template>
  <div class="home-view">
    <el-container>
      <el-header style="padding:0;">
        <HeaderDiv />
      </el-header>
      
      <el-container>
        <el-aside width="200px">
          <el-scrollbar height="calc(100vh - 60px)">
            <el-menu
              default-active="2"
              router
            >
              <!-- <el-sub-menu index="1">
                <template #title>
                  <span>Navigator One</span>
                </template>
                <el-menu-item index="1-1">item one</el-menu-item>
              </el-sub-menu> -->
              <el-menu-item
                v-for="(item, i) in menus"
                :key="i"
                :index="item.url"
              >
                <span class="first-title">{{item.name}}</span>
              </el-menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main class="content-main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import HeaderDiv from './components/HeaderPage.vue'

export default {
  name: 'HomeView',
  components: {
    HeaderDiv
  },
  data() {
    return {
      menus: [
        { name: '首页', url: 'home' },
        { name: '中国地图', url: 'chinaMap' },
      ]
    }
  },
  created() {
    console.log(this.$route.path);
  },
}
</script>
<style lang="scss" scoped>
.home-view {
  .el-aside {
    .el-menu {
      border-right: 0;
      .first-title {
        color: #333;
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
  .content-main {
    background-color: #F3F5F5;
    > div {
      height: calc(100vh - 100px);
      background-color: #fff;
    }
  }
}
</style>